<template>
	<view>
		<view>
			<u-popup v-model="show" mode="center" border-radius="20" width="60%" height="290" :mask-close-able="false"
				:custom-style="popupStyle">
				<view style="display: flex;flex-direction: row;">
					<image src="../../static/images/navigation/t.png"
						style="height: 150rpx;width: 150rpx;margin-top: 30rpx;"></image>
					<text
						style="margin-top: 40rpx;font-family: my-font;width: 280rpx;color: red;font-size: 30rpx;">:{{tokenData.message}}!点击确定跳转登录页</text>
				</view>
				<view style="display: flex;flex-direction: row;margin-top: 20rpx;">
					<u-button class="custom-style1" shape="circle" @click="Back">取消</u-button>
					<u-button class="custom-style1" shape="circle" @click="Login">确定</u-button>
				</view>
			</u-popup>
		</view>
		<view class="status_bar">

		</view>
		<u-icon name="arrow-left" size="40" @click="Back"></u-icon>
		<view class="con_top">
			<text>分享</text>
			<text>此刻,记录美好瞬间</text>
		</view>
		<view class="content_xz">
			<u-upload ref="uUpload" :model="newData" :action="url" max-count="6" @on-uploaded="upImgList"
				@on-remove="removeImg" :file-list="listImg" :header="header"></u-upload>
		</view>
		<view class="con_form">

			<u-form :model="form" ref="uForm">

				<text>标题:</text>
				<u-form-item prop="name">
					<u-input v-model="form.title" placeholder="请输入标题" height="50" />
				</u-form-item>
				<view style="height: 30rpx;"></view>
				<text>正文内容:</text>
				<u-form-item>
					<textarea v-model="form.content" maxlength="-1" placeholder="请输入正文" style="width: 100%;">
					</textarea>
				</u-form-item>
			</u-form>
			<view class="con_icon">
				<text># 话题</text>
				<text>@ 用户</text>
			</view>
		</view>

		<view class="con_bottom">
			<u-icon name="file-text" size="50" style="background-color: #f2f3f7;margin-left: 40rpx;"></u-icon>
			<u-button class="custom-style" shape="circle" @click="submit">发布</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupStyle: {
					color: '#4b5ad9',
				},
				// action: 'http://www.example.com/upload', 
				show: false,
				url: this.$url + '/dynamic/img',
				tokenData: {},
				newData: {},
				header: {
					'token': uni.getStorageSync('token')
				},
				listImg: [],
				urlList: [],
				form: {
					title: '',
					content: '',
					image: '',
				},
				formData: [{
					type: Object,
					default () {
						return {};
					}
				}],

			};
		},
		methods: {
			submit() {
				// console.log(this.form); 
				if(this.listImg != null){
					for(let i = 0;i < this.listImg.length; i++){
						this.urlList.push(this.listImg[i].response.data);
					}
					this.form.image = this.urlList.toString();
					this.$sendRequest({
						url: "/dynamic/save",
						method: 'POST',
						data: this.form,
						success: (res) => {
							console.log(res.data)
							if (res.data.code == 100) {
					
							}
							if (res.data.code == 101) {
					
							}
							this.Back(); 
						}
					});
				}
			},
			Back() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			Login() {
				uni.navigateTo({
					url: "/pages/index/login"
				})
			},
			upImgList(lists, name) {
				this.listImg = lists;
			},
			removeImg(index, lists, name) {
				this.listImg = lists;
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onShow() {
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				icon.hide();
			}, 100);

		},
		onLoad() {
			this.show = false
			this.$sendRequest({
				url: "/users/token",
				method: 'POST',
				success: (res) => {
					this.tokenData = res.data
					if (res.data.status == 500) {
						this.show = true
					}
					if (res.data.status == 401) {
						this.show = true
					}
				}
			});

		},
	}
</script>

<style>
	.con_top {
		padding-left: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		width: 100%;
		height: 180rpx;
	}

	.con_top text:first-child {
		margin-top: 25rpx;
		font-size: 60rpx;
		font-weight: bold;
		font-family: my-font;
		color: #4b5ad9;
	}

	.con_top text:nth-child(2) {
		margin-left: 15rpx;
		margin-top: 60rpx;
		font-size: 32rpx;
		font-family: my-font;
		color: #4b5ad9;
	}

	.content_xz {
		padding: 10rpx;
		margin: 0 auto;
		width: 90%;
		background-color: #fffffd;
		border-radius: 5px 30px 5px 30px;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.con_form {
		margin-top: 20rpx;
	}

	.con_form text {
		margin-left: 40rpx;
		color: #4b5ad9;
	}

	.con_icon {
		margin-bottom: 30rpx;
		display: flex;
		width: 100%;
	}

	.con_icon text {
		padding-top: 5rpx;
		padding-left: 15rpx;
		width: 110rpx;
		height: 50rpx;
		background-color: #fffffd;
		border-radius: 5px;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.u-form-item:nth-child(2) {
		padding-left: 10rpx;
		width: 90%;
		background-color: #fffffd;
		border-radius: 50rpx;
		margin: 10rpx auto;
		border-radius: 5px 30px 5px 5px;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.u-form-item:nth-child(5) {
		padding-left: 10rpx;
		width: 90%;
		height: 300rpx;
		background-color: #fffffd;
		border-radius: 50rpx;
		margin: 10rpx auto;
		border-radius: 5px 30px 5px 5px;
		box-shadow: 2px 3px 5px 5px rgba(230, 234, 246, 0.5);
	}

	.con_bottom {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		flex-direction: row;
		background-color: #fffffd;
		border-radius: 0px 60px 0px 0px;
		box-shadow: -2px -3px 5px 5px rgba(235, 234, 246, 0.9);
	}
</style>

<style scoped>
	.u-icon {
		margin: 20rpx;
		background-color: #fffffd;
		width: 80rpx;
		height: 80rpx;
		padding: 20rpx;
		border-radius: 100rpx;
		box-shadow: 2px 3px 5px 5px rgba(235, 234, 246, 0.9);
	}

	.custom-style {
		margin-top: 20rpx;
		background-color: #4b5ad9;
		color: white;
		width: 65%;
	}

	.custom-style1 {
		margin-top: 20rpx;
		background-color: #4b5ad9;
		color: white;
		font-size: 24rpx;
		width: 35%;
		height: 45rpx;
	}

	.u-field {
		background-color: #fffffd;
		border-radius: 100rpx;
		box-shadow: -2px -3px 5px 5px rgba(235, 234, 246, 0.9);
	}
</style>
